<template>
	<div class="department-tree">
		<el-table :data="tableData" row-key="id" border :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }" default-expand-all>
			<el-table-column prop="name" label="姓名" min-width="2"></el-table-column>
			<el-table-column prop="createName" label="创建人" min-width="1"></el-table-column>
			<el-table-column prop="createTime" label="创建日期" min-width="1"></el-table-column>
			<el-table-column label="是否前台统计" width="120">
				<template slot-scope="{ row }">
					<template v-if="row.level === '2'">
						<el-switch v-model="row.extFiled1" active-value="1" inactive-value="0" @change="handleSwitchChange(row)"></el-switch>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="225">
				<el-button-group slot-scope="{ row }">
					<el-button size="mini" type="primary" @click="hadnleAdd(row)">添加子部门</el-button>
					<el-button size="mini" type="warning" @click="hadnleAdd(row, 'edit')">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
				</el-button-group>
			</el-table-column>
		</el-table>
		<Add :tableData="tableData" />
	</div>
</template>
<script>
import { compact } from 'lodash';
export default {
	components: {
		Add: () => import('./Add.vue')
	},
	data() {
		return {
			listQuery: {
				deptId: '',
				isChildUser: '1'
			},
			tableData: [],
			defaultCheckedKeys: [],
			expandedArr: [],
			defaultProps: {
				children: 'childList',
				label: 'name'
			}
		};
	},
	mounted() {
		this.getList();
		this.$bus.$on('refreshDeptList', (v) => {
			if (v) {
				Object.assign(this.listQuery, v);
			}
			this.getList();
		});
	},
	beforeDestroy() {
		this.$bus.$off('refreshDeptList');
	},
	methods: {
		//查询部门
		async getList() {
			let res = await this.$store.dispatch('queryTbDeptList', { pId: 0 });
			let { data } = res;
			let { deptFullData, userType } = this.$store.getters;
			if (userType == 1) {
				//超管
				this.tableData = data;
			} else {
				//普通管理员
				if (!data.length || data.hasOwnProperty('childList')) return;
				let fullDept = data[0].childList;
				if (deptFullData.hasOwnProperty('childList') && deptFullData.childList.length) {
					let schoolDept = deptFullData.childList[0].id;
					this.tableData = fullDept.filter((v) => v.id == schoolDept);
				}
			}
			if (this.tableData.length) {
				this.expandedArr.push(this.tableData[0].id);
				this.listQuery.deptId = this.tableData[0].id;
			}
		},
		//更新数据默认展开节点
		nodeExpand(v) {
			this.expandedArr.push(v.id);
		},
		//更新数据默认收起节点
		nodeCollapse(v) {
			let idx = this.expandedArr.indexOf(v.id);
			if (idx == -1) return;
			this.expandedArr.splice(idx, 1);
		},
		handleClick(row) {
			this.listQuery.deptId = row.key;
		},
		//  限制长度
		setDisabled(row) {
			let size = compact(row.deptFullpath.split('/')).length;
			return size <= 4;
		},
		hadnleAdd(row, type) {
			this.$bus.$emit('showDialogDeptAdd', row, type);
		},
		//删除确认
		handleDelete(row) {
			this.deleteTips(() => {
				this.delete(row);
			}, '删除部门将影响平台功能，请慎重操作，是否删除?');
		},
		//删除
		async delete(row) {
			let res = await this.$store.dispatch('deleteTbDept', row);
			let { msg } = res;
			if (msg == 0) {
				this.$message.success('删除成功！');
				this.getList();
			} else if (msg == 1) {
				this.$message.error('当前部门下有子部门，无法删除，请先删除子部门！');
			} else if (msg == 2) {
				this.$message.error('当前部门下有用户，无法删除， 请先转移用户！');
			}
		},

		//前台显示部门文章统计
		handleSwitchChange(row) {
			let params = { ...row };
			this.$store.dispatch('updateTbDept', params);
		}
	}
};
</script>
<style scoped lang="scss">
.department-tree {
	.aside-title {
		padding: 5px 0;
	}

	.node-names {
		float: left;
		max-width: 180px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.el-tree {
		height: 650px;
		overflow-y: auto;
	}
	span.custom-tree-node {
		width: 100%;
	}
	span.edit {
		float: right;
		padding-right: 5%;
		position: absolute;
		right: 0;
	}
	.custom-tree-container {
		padding: 0px 10px 10px 10px;
		background: #f5f7fa;
	}
	span.edit .el-button--text {
		padding: 0;
	}
}
</style>

<style scoped>
.department-tree >>> .el-tree-node__content {
	padding: 5px 0;
}
</style>
